<template>
  <view>
    <view v-if="type == 'waterfall'">
      <view class="" style="height: 100%;">
        <view class="waterfall">
          <uv-waterfall ref="waterfall"
                        v-model="goodsList"
                        :add-time="50"
                        column-count="2"
                        left-gap="10"
                        right-gap="10"
                        column-gap="8"
                        column-width="40"
                        @changeList="changeList"
          >
            <template v-slot:list1>
              <view>
                <view v-for="(item, index) in list1"
                      :key="item.id"
                      class="waterfall-item"
                >
                  <view @click="todetail(item.id,item.type)" class="waterfall-item__image">
                    <image v-if="item.type == 1" class="pointbgc" src="https://image.hzwltb69.com/app/date/2023/pointbgc.png" ></image>
                    <image v-if="item.hasVideo" src="https://image.hzwltb69.com/app/imgs/chat/live.gif" class="lives" mode=""></image>
                    <!--									<image :src="item.img" mode="widthFix">-</image> -->
                    <uv-image :src="item.medium || item.productImages[0].source" mode="widthFix" width="350rpx" >
                      <template v-slot:loading>
                        <image class="loadingLogo" src="https://image.hzwltb69.com/app/date/2023/lodingLogo.png" mode="widthFix" ></image>
                      </template>
                    </uv-image>
                  </view>
                  <view class="p-title">
                    {{item.name}}
                  </view>
                  <view class="p-pirce">
                    <view class="">
                      <text style="font-size: 22rpx;">￥</text>{{item.price}}
                      <span style="font-size: 22rpx;color: #999999;margin-left: 20rpx;">{{item.paySales || item.sales}}人付款</span>
                    </view>
                    <view class="cat">
                      <img src="https://image.hzwltb69.com/app/date/2023/cat.png" alt="">
                    </view>
                  </view>
                </view>
              </view>
            </template>
            <template v-slot:list2>
              <view>
                <view v-for="(item, index) in list2"
                      :key="item.id"
                      class="waterfall-item"
                >
                  <view @click="todetail(item.id,item.type)" class="waterfall-item__image">
                    <image v-if="item.type == 1" class="pointbgc" src="https://image.hzwltb69.com/app/date/2023/pointbgc.png" ></image>
                    <image v-if="item.hasVideo" src="https://image.hzwltb69.com/app/imgs/chat/live.gif" class="lives" mode=""></image>
                    <!--									<image :src="item.img" mode="widthFix"></image>-->
                    <uv-image :src="item.medium || item.productImages[0].source" mode="widthFix" width="350rpx" >
                      <template v-slot:loading>
                        <image class="loadingLogo" src="https://image.hzwltb69.com/app/date/2023/lodingLogo.png" mode="widthFix" ></image>
                      </template>
                    </uv-image>
                  </view>
                  <view class="p-title">
                    {{item.name}}
                  </view>
                  <!-- 									<view class="butie-box">
                                      <view class="butie">
                                        补贴:{{((item.price-item.cost)*rebate/100).toFixed(2)}}元
                                      </view>
                                    </view> -->
                  <view class="p-pirce">
                    <view class="">
                      <text style="font-size: 22rpx;">￥</text>{{item.price}}
                      <span style="font-size: 22rpx;color: #999999;margin-left: 20rpx;">{{item.paySales || item.sales}}人付款</span>
                    </view>
                    <view class="cat">
                      <img src="https://image.hzwltb69.com/app/date/2023/cat.png" alt="">
                    </view>
                  </view>
                </view>
              </view>
            </template>
          </uv-waterfall>
        </view>
      </view>
    </view>
    <view style="padding-left: 15rpx"  v-else>
      <view class="big-goods  u-flex u-p-20 u-col-top u-m-b-16" v-for="item in goodsList" :key="item.id"
            @tap="todetail(item.id)">

        <uv-image :src="item.medium" mode="widthFix" width="200rpx" radius="10" >
          <template v-slot:loading>
            <image class="loadingLogo" src="https://image.hzwltb69.com/app/date/2023/lodingLogo.png" mode="widthFix" ></image>
          </template>
        </uv-image>

        <view class=" card-right u-m-l-20 u-flex-col u-row-between">
          <view class="">
            <view class="goods-title u-m-t-10 u-m-b-10">
              {{ item.name }}
            </view>
            <view
                style="font-size: 24rpx;
                    color: #a6a6a6;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 300rpx;overflow: hidden">{{item.caption}}</view>
            <view class="subtitle-text u-m-b-10">{{ item.subtitle?item.subtitle:"" }}</view>
          </view>
          <view class="u-flex u-m-y-10 u-row-between">
            <!-- <view class="progress-text">补贴￥{{ ((item.price-item.cost)* item.rebate/100).toFixed(2)}}</view> -->
          </view>

          <view class=" u-flex u-row-between u-col-center shop-box">
            <view class="u-flex u-col-bottom">
              <view class="price u-m-r-10">￥{{ item.price }}</view>
              <view class="origin-price">
              </view>
            </view>
            <button class="u-reset-button buy-btn">立即抢购</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  props:{
    goodsList:{
      type:Array,
      default:()=>[]
    },
    type:{
      type:String,
      default:'waterfall'
    }
  },
  data(){
    return{
      list1:[],
      list2:[],
    }
  },
  methods:{
    setWaterfall(){
      this.list1 = [];
      this.list2 = [];
    },
    changeList(e){
      this[e.name].push(e.value);
    },
    todetail(e,t){
      this.$Router.push({
        path: t == 1 ? '/pages/goods/pointdetail' :'/pages/goods/detail',
        query: {
          id: e,
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.waterfall{
  background: #f6f6f6;
  image{
    width: 350rpx !important;
  }
}

.waterfall-item {
  overflow: hidden;
  margin-top: 18rpx;
  border-radius:15rpx;
}
.waterfall-item {
  background: #fff;
  .p-title{
    padding: 10rpx;
    width: 350rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .p-pirce{
    width: 320rpx;
    padding: 10rpx;
    display: flex;
    justify-content: space-between;
    // margin-bottom: 20rpx;
    color: #db5235;
    // font-weight: 600;
    font-size: 32rpx;
    align-items: center;
    .cat{
      width: 45rpx;
      height: 45rpx;
      margin-bottom: 15rpx;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .butie-box{
    padding: 10rpx;
    .butie{
      // width: 100rpx;
      color: #db5235;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 25rpx;
      display: inline-block;
      border: 1px solid #db5235;
      padding: 0 20rpx 0 20rpx;
      border-radius: 20rpx;
    }
  }
}
.waterfall-item__ft {
  padding: 20rpx;
  background: #fff;
  &__title {
    margin-bottom: 10rpx;
    line-height: 48rpx;
    font-weight: 700;
    .value {
      font-size: 32rpx;
      color: #303133;
    }
  }
  &__desc .value {
    font-size: 28rpx;
    color: #606266;
  }
  &__btn {
    padding: 10px 0;
  }
}
.lives{
  width: 40rpx !important;
  height: 40rpx !important;
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  z-index: 10;
}
.waterfall-item__image{
  position: relative;
  .pointbgc{
    position: absolute;
    top: 0;
    right: 0;
    width: 100rpx !important;
    height: 100rpx;
    z-index: 10;
  }
}
.big-goods {
  width: 710rpx;
  margin-left: 8rpx;
  min-height: 240rpx;
  background: #ffffff;
  //box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
  border-radius: 20rpx;
  position: relative;
  .shop-box{
    position: absolute;
    bottom: 15rpx;
    right: 20rpx;
    width: 450rpx;
  }
  .goods-img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 6rpx;
  }

  .card-right {
    width: 330rpx !important;
    height: 100%;
  }

  .goods-title {
    font-size: 30rpx;
    // font-weight: 600;
    height: 78rpx;
    width: 460rpx;
    color: #242424;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: "Microsoft YaHei UI";

  }

  .subtitle-text {
    font-size: 22rpx;
    width: 350rpx;
    font-weight: 500;
    color: #666666;
  }

  .buy-btn {
    width: 140rpx;
    line-height: 60rpx;
    background: #fa4d44;
    border-radius: 35rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #ffffff;
  }

  .progress-text {
    color: #333;
    font-size: 20rpx;

    padding: 8rpx;
    border-radius: 10rpx;
  ;

  }

  // 价格
  .price {
    color: #ff0000;
    font-weight: 600;

    &::before {

      font-size: 20rpx;
    }
  }

  .origin-price {
    color: #c4c4c4;
    font-size: 24rpx;

    &::before {

      font-size: 20rpx;
    }
  }
}
</style>